@import 'common/utils';
/**
  * in-and-out
  *
  * @author in-and-out
*/
$children: 5;

@keyframes in-and-out {
  0%, 30% {
    transform: rotate(calc(var(--offset) * -1deg));
  }
  70%, 100% {
    transform: rotate(calc(var(--offset) * 1deg));
  }
}

@keyframes in-and-out-two {
  0%, 30% {
    transform: rotate(calc(var(--offset) * 1deg));
  }
  70%, 100% {
    transform: rotate(calc(var(--offset) * -1deg));
  }
}

@keyframes in-and-out-children {
  0%, 50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
  }
  80%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
  }
}

@keyframes in-and-out-two-children {
  0%, 50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
  }
  80%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
  }
}


$duration: 1s;
.in-and-out {
  --offset: #{(360 / $children) / 4};
  & > div {
    --radius: 30;
    --size: 10;
    @include sizeCSS(size);
    position: absolute;

    &:nth-of-type(1) {
      --multiplier: 1;
      animation: in-and-out $duration infinite ease both;
      div {
        animation: in-and-out-children $duration infinite ease;
      }
    }
    &:nth-of-type(2) {
      --multiplier: 2;
      animation: in-and-out-two $duration infinite ease both;
      div {
        animation: in-and-out-two-children $duration infinite ease;
      }
    }


  }

  div div {
    background: var(--primary);
    border-radius: 100%;
    height: 100%;
    position: absolute;
    width: 100%;
    @for $c from 1 through $children {
      &:nth-child(#{$c}) {
        --rotation: #{(360 / $children) * $c};
      }
    }
  }
}